<template>
  <div class="details-container app-container" v-loading="listLoading">
    <div class="detail-title">
      <div>
        行业规则：{{ industryName
        }}<span style="padding-left: 15px; padding-right: 10px">行业编号：{{ industryId }}</span>
      </div>
      <icon-rule :industryId="industryId"></icon-rule>
      <el-button style="margin-left: 10px" :disabled="!industryId" v-waves type="primary" @click="toChat">
        立即搜索
      </el-button>
    </div>

    <div class="detail-title">
      <div class="filter-container">
        <el-input v-model="listQuery.mid_table_remark_013_like" placeholder="会话ID查询" clearable
          class="filter-item input-item" style="width: 200px" @clear="handleFilter" @keyup.enter.native="handleFilter" />
        <el-input v-model="show_mid_table_remark_001_like" placeholder="查询条件" clearable
          class="filter-item input-item" style="width: 200px" @clear="handleFilter" @keyup.enter.native="handleFilter" />
        <el-input v-model="show_mid_table_remark_002_like" placeholder="查询结果" clearable
          class="filter-item input-item" style="width: 200px" @clear="handleFilter" @keyup.enter.native="handleFilter" />
        <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
          搜索
        </el-button>
        <el-button v-waves class="filter-item" type="primary" @click="toClassicLog()">
          查看经典收录
        </el-button>
      </div>
    </div>
    <div class="page-content">
      <el-table :key="0" v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
        <el-table-column label="ID" align="center" width="80">
          <template slot-scope="{ row }">
            <span>{{ row.id_public_middle_table }}</span>
          </template>
        </el-table-column>
        <el-table-column label="查询条件" align="center" :show-overflow-tooltip="false">
          <template slot-scope="{ row }">
            <el-popover placement="left" width="200" trigger="click">
              <div class="popover-box nowrap">
                <div class="cont-item" v-html="row.show_mid_table_remark_001"></div>
              </div>
              <div class="table-cell-overflow" slot="reference">{{ row.show_mid_table_remark_001 | showBRContent }}</div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="查询结果" align="center" :show-overflow-tooltip="false">
          <template slot-scope="{ row }">

            <el-popover placement="left" width="600" trigger="click">
              <div class="popover-box nowrap">
                <pre class="cont-item" v-html="row.show_mid_table_remark_002"></pre>
              </div>
              <div class="table-cell-overflow" slot="reference">{{ row.show_mid_table_remark_002 | showBRContent }}</div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="会话ID" align="center" :show-overflow-tooltip="true">
          <template slot-scope="{ row }">
            <el-button type="text" @click="handleChatDetail(row)">{{
              row.mid_table_remark_013
            }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="查询时间" align="center" width="160" :resizable="false">
          <template slot-scope="{ row }">
            {{ row.time_insert }}
          </template>
        </el-table-column>
        <el-table-column label="评价等级" align="center" width="110" :resizable="false">
          <template slot-scope="{ row }">
            <!-- {{ row.mid_table_remark_009 }} -->
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width" :resizable="false">
          <template slot-scope="{ row }">
            <el-button type="text" size="mini" @click="handleRecordClassic(row)" :disabled="!!row.tmp_recorded_status">
              {{row.tmp_recorded_status?'已收录':'点击收录'}}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination v-show="total > 0" :total="total" :page.sync="currentPage" :limit.sync="listQuery.limit"
      @pagination="getPageList" />
    <comp-new-modify ref="refNewModify"></comp-new-modify>
    <comp-chat-detail ref="refChatDetail" @refresh="refresh"></comp-chat-detail>
    <comp-add-to-classic ref="refAddToClassic" @refresh="refresh"></comp-add-to-classic>
  </div>
</template>

<script>
import { Base64 } from "js-base64";
import Pagination from "@/components/Pagination";
import waves from "@/directive/waves"; // waves directive
import CompNewModify from "./components/new_modify_rule.vue";
import { middleList } from "@/api/middle";
import IconRule from "./components/icon_rules.vue";
import CompChatDetail from "./components/chat_detail.vue";
import CompAddToClassic from "./components/add_classic.vue"
export default {
  name: "IndustrySearchLog",
  directives: { waves },
  components: {
    Pagination,
    IconRule,
    CompNewModify,
    CompChatDetail,
    CompAddToClassic
  },
  data() {
    return {
      industryId: "",
      industryName: "",
      show_mid_table_remark_001_like: "",
      show_mid_table_remark_002_like: "",
      listQuery: {
        invoke_method: "public_load_middle_table_list",
        pre_db_para_middle_table_name:
          "public_middle_table_lite_mod_ai_chatgpt",
        type_middle_app: 10001,
        type_inner_app: 1001,
        is_online: 0,
        mid_table_remark_013_like: "",


        pre_db_para_begin_idx: 0,
        pre_db_para_length_4_list: 10,
        pre_db_para_group_by_para: "mid_table_remark_013",

      },
      listLoading: false,
      list: [],
      total: 1,
      currentPage: 1,

      isRequesting: false,
      // 编辑详情
    };
  },
  filters: {
    showBRContent(val) {
      if (!val) { return val }
      return val.replace(/<br\s*\/?>/g, "\n")
    },
    showRuleContent(val) {
      // return Base64.decode(val)
      try {
        let result = Base64.decode(val)
        return result
      } catch (error) {
        return val;
      }
    },
  },
  async mounted() {
    let id = this.$route.query.id;
    let name = decodeURIComponent(this.$route.query.name);
    this.industryId = id;
    this.industryName = name;

    if (id) {
      this.getList();
    } else {
      this.list = [];
      this.handleClose();
    }
  },
  methods: {
    /*
     * 获取页面数据
     * */
    async getList() {
      this.listLoading = true;
      let tmp_listQuery = Object.assign(
        { mid_table_remark_008: this.industryId },
        this.listQuery
      );
      if(this.show_mid_table_remark_001_like){
        let tmp=Base64.encode(this.show_mid_table_remark_001_like);
        while(tmp.lastIndexOf('=')==(tmp.length-1)){
          tmp=tmp.substring(0,tmp.lastIndexOf('='));
        }
        tmp_listQuery.mid_table_remark_001_like=tmp
      }
      if(this.show_mid_table_remark_002_like){
        let tmp=Base64.encode(this.show_mid_table_remark_002_like);
        while(tmp.lastIndexOf('=')==(tmp.length-1)){
          tmp=tmp.substring(0,tmp.lastIndexOf('='));
        }
        tmp_listQuery.mid_table_remark_002_like=tmp
      }
      let resultList=[]
      let resultTotal=0
      let response= await middleList(this.Qs.stringify(tmp_listQuery)).catch((err)=>{
        resultTotal=0;
        resultList=[]
      });
      if(response){
        resultList = response.page_content || [];
        resultTotal=response.result_num;
      }
      // 获取已收录列表
      let queryRecorded = {

        invoke_method: "public_load_middle_table_list",
        pre_db_para_middle_table_name: "public_middle_table_lite_mod_ai_chatgpt",
        type_middle_app: 30001,
        type_inner_app: 1001,
        is_online: 0,
        pre_db_para_begin_idx: 0,
        pre_db_para_order_by_para: "time_update desc",
      }
      let recordedList=[]
      let responseRecorded=await middleList(this.Qs.stringify(queryRecorded)).catch(error=>{
        console.log('error>>>>',error)
        recordedList=[]
      })
      if(responseRecorded){
        recordedList=responseRecorded.page_content||[]
      }
      for (let i = 0; i < resultList.length; i++) {
          let item = resultList[i];
          item.show_mid_table_remark_001 = item.mid_table_remark_001;
          try {
            if (item.mid_table_remark_001) {
              item.show_mid_table_remark_001 = Base64.decode(item.mid_table_remark_001)
            }
            if (item.mid_table_remark_002) {
              item.show_mid_table_remark_002 = Base64.decode(item.mid_table_remark_002)
            }
          } catch (error) {
          }
          item.tmp_recorded_status=0;
          for (let index = 0; index < recordedList.length; index++) {
            const itemRecorded = recordedList[index];
            if(itemRecorded.mid_table_remark_013.indexOf(item.mid_table_remark_013)===0){
              item.tmp_recorded_status=1;
              break;
            }
          }
        }
        this.list = resultList;
        this.total = resultTotal

      setTimeout(() => {
          this.listLoading = false;
        }, 0.5 * 1000);
    },
    /*
     * 点击分页进行查询
     * */
    getPageList(val) {
      this.listQuery.pre_db_para_begin_idx =
        (val.page - 1) * this.listQuery.pre_db_para_length_4_list;
      this.getList();
    },

    handleClose() {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.go(-1);
    },



    toClassicLog() {
      this.$router.push({
        path: "/industryClassicLog",
        query: { id: this.industryId || "", name: this.industryName || "" },
      });
    },
    handleChatDetail(row) {
      this.$refs.refChatDetail.onShowDialog(row, { industryId: this.industryId, industryName: this.industryName })
    },
    handleFilter() {
      this.listQuery.pre_db_para_begin_idx = 0;
      this.getList();
    },
    toChat() {
      if (!this.industryId) {
        return;
      }
      let tmpInustryName = this.industryName || "";
      if (tmpInustryName) {
        tmpInustryName = encodeURIComponent(tmpInustryName)
      }
      this.$router.push({
        path: "/industryChat",
        query: {
          id: this.industryId || "",
          name: tmpInustryName,
        },
      });
    },
    async handleRecordClassic(row) {
      let tmpData = Object.assign({}, { industryId: this.industryId, industryName: this.industryName }, { pre_cmd_para_session_id: row.mid_table_remark_013, pre_cmd_para_classify_tag: "" });
      this.$refs.refAddToClassic.onEditOrAdd(tmpData)
      return;
    },
    refresh() {
      // this.listQuery.pre_db_para_begin_idx = 0;
      this.getList()
    }
  },
};
</script>
<style lang="scss" scoped>
@import "../../styles/variables";
@import "../../styles/common.scss";
.detail-title {
  border-bottom: 1px solid #e3e3e3;
  padding: 16px 0;
  font-size: 16px;
  font-weight: bold;
  display: flex;
  // justify-content: space-between;
  align-items: center;
}

.detail-content {
  padding: 24px 24px 0;

  .el-row {
    margin-bottom: 10px;
  }
}

</style>
